<template>
  <div class="my">
    <div class="head">
      <img src="img/myh.png" />
      <div class="headc">
        <img src="img/ren.png" />
        <p>请登录</p>
        <span>&gt;</span>
      </div>
    </div>
    <div class="order">
        <div class="order-top">
            <p>我的订单</p>
            <img src="img/jt.png">
        </div>
        <div class="order-bottom">
            <div>
                <img src="img/m1.png">
                <p>待付款</p>
            </div>
            <div>
                <img src="img/m2.png">
                <p>待收货</p>
            </div>
            <div>
                <img src="img/m3.png">
                <p>评价</p>
            </div>
            <div>
                <img src="img/m4.png">
                <p>退款/售后</p>
            </div>
        </div>
    </div>
    <My/>
  </div>
</template>

<script>
import My from "./my"
export default {
    components:{
        My
    }
};
</script>

<style scoped>
.head {
  width: 100%;
  height: 0.64rem;
}
.head img {
  width: 100%;
  height: 1rem;
  position: absolute;
}
.headc {
  display: flex;
  position: relative;
  justify-content: space-between;
}
.headc img {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  margin-top: 0.2rem;
  margin-left: 0.2rem;
}
.headc p {
  font-size: 0.14rem;
  color: white;
  margin-left: 1rem;
  margin-top: 0.43rem;
}
.headc span {
  color: rgb(168, 168, 168);
  font-size: 0.3rem;
  margin-top: 0.3rem;
  margin-right: 0.2rem;
}
.order{
    width: 100%;
    height: 1.1rem;
    margin-top: 0.35rem;
}
.order .order-top{
    height: 0.42rem;
    width: 100%;
    display: flex;
    justify-content:space-between;
    background-color: white;
    
}
.order-top p{
    font-size: 0.14rem;
    margin-left: 0.2rem;
    line-height: 0.42rem;
}
.order-top img{
    width: 0.15rem;
    height: 0.15rem;
    margin-right: 0.2rem;
    margin-top: 0.14rem;
}
.order-bottom{
    width: 100%;
    height: 0.68rem;
    display: flex;
    justify-content: space-around;
    margin-top: 0.01rem;
    background-color: white;
}
.order-bottom div{
    width: 0.42rem;
    height: 0.6rem;
    margin-top: 0.04rem;
}

.order-bottom div img{
    width: 0.4rem;
    height: 0.4rem;
    position: absolute;
}

.order-bottom div p{
    font-size: 0.13rem;
    color: rgba(0, 0, 0, 0.6);
    position: absolute;
    top: 1.85rem;
}

.order-bottom div:nth-child(3) p{
    left: 2.2rem;
}
.order-bottom div:nth-child(4) p{
    left: 3rem;
}

</style>